<template>
  <div class="page">
    <el-breadcrumb separator-class="el-icon-arrow-right" class="breadcrumb">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/dynamic/construction' }"
        >协会动态</el-breadcrumb-item
      >
      <el-breadcrumb-item :to="{ path: '/dynamic/activity' }"
        >协会活动</el-breadcrumb-item
      >
      <el-breadcrumb-item>协会活动详情</el-breadcrumb-item>
    </el-breadcrumb>

    <div class="content" v-if="details">
      <div class="card">
        <el-card class="card" shadow="hover" v-if="details.state != 2">
          <div style="display: flex">
            <div
              class="card-l"
              :style="{ height: phoneType === null ? '' : '300px' }"
            >
              <div style="text-align:left;padding-bottom:10px;font-size:24px" v-if="phoneType != null">
                <span v-if="details.activityState == 1" style="color:#0b4e9e">活动预约中 </span>
                <span v-else>活动已结束 </span>
              </div>

              <img
                v-if="details.activityCover"
                :src="$store.state.baseUrl + details.activityCover"
                alt=""
              />
              <img v-else src="@/assets/default.jpg" alt="" />
            </div>
            <div class="card-r">
              <h5>
                {{ details.activityTitle }}
              </h5>
              <div>
                <img src="@/assets/home_host.png" alt="" />
                <span style="-webkit-line-clamp: 1">{{
                  details.activityOrganizer
                }}</span>
              </div>
              <div>
                <img src="@/assets/home_address.png" alt="" />
                <span>{{ details.activityAddress }}</span>
              </div>
              <div>
                <img src="@/assets/home_start time.png" alt="" />
                <span>{{ details.startTime | formatTime }}</span>
              </div>
              <div>
                <img src="@/assets/home_end time.png" alt="" />
                <span>{{ details.endTime | formatTime }}</span>
              </div>
              <div>
                <img src="@/assets/home_phone.png" alt="" />
                <span>{{ details.bookingLine }}</span>
              </div>
              <div style="padding: 30px 0 0 30px" v-if="phoneType === null">
                <el-button
                  v-if="details.activityState == 1"
                  size="mini"
                  class="btn"
                  style="border: 1px solid #0b4e9e; color: #0b4e9e"
                  >预约中</el-button
                >
                <el-button
                  v-else
                  class="btn"
                  size="mini"
                  disabled
                  style="border: 1px solid #ccc"
                  >已结束</el-button
                >
              </div>
            </div>
          </div>
        </el-card>
      </div>

      <div class="detail" v-if="details.activityContent">
        <h5>活动详情</h5>
        <quill-editor
          disabled
          v-model="details.activityContent"
          class="ql-editor ql-box"
        />
      </div>
    </div>
  </div>
</template>

<script>
import api from "@/api/modules/home.js";
export default {
  name: "ActivityDetail",
  data() {
    return {
      details: "",
      phoneType: null,
    };
  },
  mounted() {
    this.phoneType = navigator.userAgent.match(
      /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
    );
    this.getData();
  },
  methods: {
    getData() {
      api
        .getActivityDetail({ associationActivityId: this.$route.params.id })
        .then((res) => {
          this.details = res.data;
        });
    },
  },
};
</script>
<style lang="less" scoped>
.page {
  width: 75%;
  margin: 0 auto;
  .breadcrumb {
    box-sizing: border-box;
    height: 84px;
    line-height: 84px;
    padding-left: 16px;
  }
  .content {
    text-align: center;
    border: 1px solid #e8f2fd;
    // padding: 64px;
    margin-bottom: 64px;
    .card {
      width: 100%;
      // height: 560px;
      box-sizing: border-box;
      padding: 20px 17px;
      .card-l {
        width: 50%;
        // height: 480px;
        // background-color: #0b4e9e;
        position: relative;
        margin-right: 40px;
        img {
          width: 100%;
          height: 100%;
        }
        p {
          position: absolute;
          top: 70%;
          padding: 0 40px;
          box-sizing: border-box;
          font-size: 40px;
          color: #fff;
          text-align: center;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
        }
      }
      .card-r {
        width: 50%;
        position: relative;
        h5 {
          margin: 0 0 16px 0;
          padding-bottom: 16px;
          border-bottom: 1px solid #e8f2fd;
          font-size: 32px;
          text-align: left;
          // overflow: hidden;
          // text-align: left;
          // white-space: nowrap;
          // text-overflow: ellipsis;
        }
        div {
          margin-bottom: 20px;
          display: flex;
          img {
            width: 32px;
            height: 32px;
            margin-right: 16px;
            vertical-align: middle;
          }
          span {
            text-align: left;
            flex: auto;
            overflow: hidden;
            display: block;
            // max-width: 294px;
            width: 100%;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            color: #666666;
            font-size: 28px;
          }
        }
        .el-button {
          // position: absolute;
          // bottom: 15px;
          // left: 40px;
          transform: scale(2);
        }
      }
    }
    .detail {
      padding: 64px;
      h5 {
        font-size: 28px;
        text-align: center;
        border-bottom: 1px solid #e8f2fd;
        padding-bottom: 20px;
        margin: 0;
      }
    }
  }
}
</style>

